<template>
    <div v-if="$store.state.Pk.status == 'playing'">
        <groundComponets />
    </div>
    <div v-else>
        <matchingComponents ref="matching" />
    </div>
    <winShowCompoents ref="winShow" @open="openSocket()" @close="closeSocket()" />
</template>

<script>
import groundComponets from '@/components/pk/groundComponets.vue';
import matchingComponents from '@/components/pk/matchingComponents.vue';
import winShowCompoents from '@/components/pk/winShowCompoents.vue';
import { setTimeout } from 'core-js';
import { onMounted, onUnmounted, ref } from 'vue';
import { useStore } from 'vuex';
export default {
    name: "pkView",
    components: {
        groundComponets,
        matchingComponents,
        winShowCompoents,
    },
    setup() {
        const store = useStore();
        const socketUrl = `ws://124.221.73.180:3000/websocket/${store.state.User.token}`;
        let socket = null;
        let matching = ref(null);
        let timer = null;
        let winShow = ref(null);

        let update = () => {
            store.commit("updateStatus", "playing");
        }
        let openSocket = () => {
            socket = new WebSocket(socketUrl);//建立连接
            socket.onopen = () => {//websocket的构造函数，自动执行这个
                store.commit("updatePK", socket);//建立连接时执行onopen
            }
        }
        let closeSocket = () => {
            socket.close();
        }
        onMounted(() => {
            openSocket();
            socket.onmessage = (message) => {//收到信息执行,路由
                const data = JSON.parse(message.data);
                if (data.event == "success") {
                    store.commit("updateOpponent", {
                        name: data.oppoUserName,
                        photo: data.oppoUserPhoto,
                    });
                    matching.value.update();//更新对手头像
                    matching.value.wait3();//3秒倒计时
                    timer = setTimeout(() => {
                        store.commit("updateGame", data.gameInfo);
                        update();//显示地图
                        winShow.value.updateScore({
                            winScore: data.gameInfo.winScore,
                            loseScore: data.gameInfo.loseScore,
                        });
                        store.commit("updateScore", {
                            winScore: data.gameInfo.winScore,
                            loseScore: data.gameInfo.loseScore,
                        });
                        store.commit("startTime");
                    }, 3000);
                } else if (data.event == "result") {//游戏结束
                    const game = store.state.Pk.gameObject;
                    const [snake0, snake1] = game.snakes;
                    if (data.loser == "all" || data.loser == "1") {
                        snake0.status = "die";
                        store.commit("loserSet", data.loser);
                        winShow.value.show();
                    }
                    if (data.loser == "all" || data.loser == "2") {
                        snake1.status = "die";
                        store.commit("loserSet", data.loser);
                        winShow.value.show();
                    }
                } else if (data.event == "move") {
                    const game = store.state.Pk.gameObject;
                    const [snake0, snake1] = game.snakes;
                    snake0.setDirection(data.direction1);//设置蛇走的方向
                    snake1.setDirection(data.direction2);
                }
            }
            socket.onclose = () => {//结束时执行onclose，但是关闭ws连接是用.close()

            }
        })

        onUnmounted(() => {
            socket.close();
            store.commit("updateStatus", "matching");
            store.commit("clear");
            clearTimeout(timer);
        })

        return {
            matching,

            closeSocket,
            openSocket,
            winShow,
            timer,
            store,
        }
    },
}

</script>

<style scoped></style>